<template>
  <!--主容器-->
  <div class="container">
    <el-container class="container">
      <!--左侧内容-->
      <el-aside :width="isCollapse ? '64px' : '250px'" class="el-aside">
        <!--logo-->
        <div id="title" :style="{color: theme}">
          <span v-if="!isCollapse" style="cursor: pointer" @click="reload">{{projectName}}</span>
          <span v-else style="cursor: pointer" :title="projectName"><i :class="logo"/></span>
        </div>

        <!--左侧菜单-->
        <aside_menu
                :activeTextColor="theme"
                ref="aside_menu">
        </aside_menu>
      </el-aside>

      <el-container class="el-container">
        <!--头部-->
        <el-header class="el_header" height="60px">
          <!--头部工具栏-->
          <header_bar
                  @toggleCollapse="toggleCollapse"></header_bar>
        </el-header>

        <!-- 面包屑效果 -->
        <div class="header_crumbs">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-if="$route.path !== '/home'">
              {{$route.meta.title}}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!--中间主体-->
        <el-main class="el-main">
          <!--页面主体路由跳转-->
          <router-view class="home_router_view"/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<!--<div style="min-height: calc(100vh - 10px)"></div>-->
<script>
  // @ is an alias to /src
  import api from "@/utils/api";
  import aside_menu from '@/components/frame/AsideMenu';
  import header_bar from '@/components/frame/HeaderBar';

  export default {
    name: 'Frame',
    components: {
      aside_menu,
      header_bar
    },
    data() {
      return {
        projectName: 'Autumn Office',
        logo: 'fa fa-coffee',
        //是否折叠左侧菜单
        isCollapse: false,
        //主题颜色
        theme: '#409EFF',
        //预定义主题
        predefineColors: [
          '#ff4500',
          '#ff8c00',
          '#ffd700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585',
          'rgba(255, 69, 0, 0.68)',
          'rgb(255, 120, 0)',
          'hsv(51, 100, 98)',
          'hsva(120, 40, 94, 0.5)',
          'hsl(181, 100%, 37%)',
          'hsla(209, 100%, 56%, 0.73)',
          '#c7158577'
        ],
      }
    },
    created() {
    },
    computed: {
    },
    methods: {
      /*点击展开收起左侧菜单*/
      toggleCollapse(isCollapse) {
        this.$refs.aside_menu.isCollapse = this.isCollapse = isCollapse;
      },
      reload(){
        location.reload();
      },
    },
  }
</script>

<style scoped>
  /*主容器*/
  .container{
    height: 100%;
    overflow: hidden;
  }

  /*滚动条隐藏*/
  ::-webkit-scrollbar{
    display:none;
  }

  /*侧边栏*/
  .el-aside {
    overflow: hidden;
    background-color: #28333E;
    box-shadow:5px 5px 5px rgba(0, 0, 0, .2);
  }

  /*logo*/
  #title{
    border-bottom: 1px solid #101117;
    height: 60px;
    text-align: center;
    font-size: 23px;
    font-weight: bold;
    line-height: 60px;
  }

  /*中间主体*/
  .el-main {
    box-sizing: border-box;
    padding: 0 10px 10px 10px;
  }

  /*面包屑*/
  .header_crumbs{
    padding: 10px 20px 10px 20px;
  }

  /*路由占位符*/
  .home_router_view{
    padding: 10px;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
    /*overflow-x: hidden;*/
    box-sizing: border-box;
    background-color: #F5F5F5;
  }
</style>
